Nacho Martin 
@nacmartin 


React Native Munich Meetup 

May 2017 


Nacho Martin 

I write code at Limenius. 

We build tailor-made projects, 
and provide consultancy 
and formation. 



We are very happy with React and React Native. 



Roadmap: 

• Are Sagas indispensable? 

• Do they have a strong theoretical background? 

• ES6 Generators 

• Sagas 



Maybe you don't need redux-saga 
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What we need 
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What we need 


dispatch({type: 'API_REQUEST'}) 
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Pure code 



spatch({type: 'API_REQUEST_ERROR'}) 


Side effects 










Redux-thunk 


function makeASandwichWithSecretSauce () { 
return function (dispatch) { 

dispatch({type: Constants.SANDWICH_REQUEST}) 

return fetch ( https://www.google.com/search?q=secret+sauce ) 

.then( 

sauce => dispatch({type: Constants.SANDWICH_SUCCESS, sauce 
error => dispatch({type: Constants.SANDWICH_ERROR, error}) 

); 

}; 

} 

dispatch(makeASandwichWithSecretSauce()) 



Redux-thunk 


The lib has only 14 lines of code 

If you don't need more, stick with it 

But what if you do? 


If you need more 


•Redux-saga 
•Redux-observable 
• • • 

•Maybe your own in the future? 


Sagas: an abused word 
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But nowadays 


A long and complicated story with many details 


e.g. "my neighbor told me the saga of his divorce again" 


Originally in C.S. 



Hector Garcfa-Molina 
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Originally in C.S. 



Hector Garcfa-Molina 


SAGAS 


Iltctor <7nroii-.V/o/ina 
Ktnncth Saitm 

Department of Computer Science 
1’nnceton University 
Princtton, N J 08544 


Abstract the majority of other transactions either becaise 

Long lived tnnsactiom (LLTsJ hold on to * many datable object*, it baa lengthy 

database resources for relatively long periods *f compulation., tt pauses for inputs from the users, 

time, significantly delaying the termination >f " * of facto " E«niples of 

shorter aid more common transactions To LLT » ■" transa:tions * prod*" «“«nthly 


Multiple workflows, each providing 
compensating actions for every step of 
the workflow where it can fail 









But nowadays 


A process manager used to 
orchestrate complex operations. 


But nowadays 


A process manager used to 
orchestrate complex operations. 

And in redux-saga: 


A library to manage side-effects. 


Generators 

function* 



First generator 


function* 

yield 

yield 

yield 


myFirstGenerator () 

"one" 

" two" 

"three" 


} 


var it = myFirstGenerator() 

console .log(it) 

console .log(it.next()) 
console .log(it.next()) 
console .log(it.next()) 
console .log(it.next()) 


First generator 


function* myFirstGenerator () { 

yield "one" 
yield "two" 
yield "three" 


var it = myFirstGenerator() 


• console .log(it) > 

console .log(it.next()) 
console .log(it.next()) 
console .log(it.next()) 
console .log(it.next()) 








First generator 


function* myFirstGenerator () { 

yield "one" 
yield "two" 
yield "three" 


var it = myFirstGenerator() 


• console .log(it) > 

console .log(it.next()) 
console .log(it.next()) 
console .log(it.next()) 
console .log(it.next()) 








First generator 


function* myFirstGenerator () 

yield "one" 
yield "two" 
yield "three" 


var it = myFirstGenerator() 
console .log(it) 


console .log^it.next()) ■ 
console •log (it.next()) 
console •log(it.next()) 
console •log(it.next()) 





First generator 


function* myFirstGenerator () { 

yield 1 "one r---....... 

yield * T two ,r 
yield "three" 


var it = myFirstGenerator() 


console .log(it) 


console . log (Jit. next ( ) )■ 
console .log(it.next()) 
console .log(it.next()) 
console .log(it.next()) 


{value: 'one', done: false} 




First generator 


function* myFirstGenerator () 

yield "one" 
yield "two" 
yield "three" 

} 


var it = myFirstGenerator() 

console .log(it) 

console .log(it.next()) 
console .log^it.next()) i 
console .log”it.next()) 
console .log(it.next()) 





First generator 


function* myFirstGenerator () { 

yield one^ 

yield i"two"J -- 

yield "'’tlTree" 


{value: 'two'. 


var it = myFirstGenerator() 
console. log(it) 

loa( it. next ()) 
console . logrlt. next () ) a 
console .log(it.next()) 
console .log(it.next()) 


done: false} 




First generator 


function* myFirstGenerator () 

yield "one" 
yield "two" 


} 


yield "three 


var it = myFirstGenerator() 

console .log(it) 

console .log(it.next()) 
console .log(it.next()) 
console .log< it" next()) ” 
console . log" ft" next (")") " 




First generator 


function* myFirstGenerator () { 

yield "one" 
yield "two _ 
yield ■ three"]- - 


var it = myFirstGenerator() 

console .log(it) 

console .log(it.next()) 
■cwisalf* loj( it.next() ) 
console . logrlt.next ( ) )■ 
console .log(it.next()) 


{value: 'three', done: false} 






First generator 


function* myFirstGenerator () 

yield "one" 
yield "two" 
yield "three" 


var it = myFirstGenerator() 

console .log(it) 

console .log(it.next()) 
console .log(it.next()) 
console .log(it.next()) 
console . log^"it 7 next (")" ” 




First generator 


function* myFirstGenerator () { 

yield "one" 
yield "two" 
yield "three" 


var it = myFirstGenerator() 

console. log(it) 

console .log(it.next()) 
console .log(it.next()) 
console .log(it.next()) 

■ console .log ( it.next ()) J 


{value: undefined, done: true} 





Passing values to generators 


function* sum( ) { 


var x 

= 0 




X 

+= 

(yield 

"1st " 

+ 

x) 

X 

+= 

(yield 

"2nd " 

+ 

x) 

X 

+= 

(yield 

"3rd " 

+ 

X) 

X 

+= 

(yield 

"4 th " 

+ 

X) 


var it = sum() 

console .log(it.next('unused')) 
console .log(it.next(1)) 
console .log(it.next(20)) 
console .log(it.next(300)) 
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Passing values to generators 


function* sum( ) { 


var x 

= 0 




X 

+= 

(yield 

"1st " 

+ 

x) 

X 

+= 

(yield 

"2nd " 

+ 

x) 
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+= 

(yield 

"3rd " 

+ 

X) 

X 

+= 

(yield 

"4 th " 

+ 

X) 
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var it = sum() 
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console . log (it. next ( y |unusecT'^i) 
console .log(it.next(1)) 
console .log(it.next(20)) 
console. log(it.next(300)) 


> 



Passing values to generators 


function* sum( ) { 
var x = 0 


X 

+= (yield 

"1st " 

+ 

x) 

X 

+= (yield 

"2nd " 

+ 

x) 

X 

+= (yield 

"3rd " 

+ 

X) 

X 

+= (yield 

"4 th " 

+ 

X) 


var it = sum() 

console . log (jjl£ ."next" r unuse'cl 7 )1) 
console .log(it.next(1)) 
console .log(it.next(20)) 
console .log(it.next(300)) 


} 




Passing values to generators 


function* 

sum( ) 

{ 



var x 

= 0 

f 1st " 



x += 

(yield 

+ 

xfr 

x += 

(yield 

"2nd " 

+ 

X) 

x += 

(yield 

"3rd " 

+ 

X) 

x += 

(yield 

"4 th " 

+ 

X) 


} 


var it = sum() 

e<WT«®l-e* .next( 'unused' ) )J 
console . log ( it" ne"xt ("l") """""" 
console .log(it.next(20)) 
console .log(it.next(300)) 







Passing values to generators 


function* 

sum( ) 

{ 



var x 

= 0 

f 1st " 



x += 

(yield 

+ 

xfr 

x += 

(yield 

"2nd " 

+ 

X) 

x += 

(yield 

"3rd " 

+ 

X) 

x += 

(yield 

"4 th " 

+ 

X) 


} 


var it = sum() 

e<WT«®l-e* .next( 'unused' ) )J 
console . log ( it" ne"xt ("l") """""" 
console .log(it.next(20)) 
console .log(it.next(300)) 


{value: '1st O', done: false} 







Passing values to generators 


function* sum( ) { 
var x = 0 

x += (iyield j - 'ls_t_ + _x^ 

x += (yield "2nd " + x) 

x += (yield "3rd " + x) 

x += (yield "4th " + x) 

} 


var it = sum() 

console .log(it.next( ' unused')) 
console"". log! it“. rJIi 

console .log(it.next(20)) 
console .log(it.next(300)) 




Passing values to generators 


function* sum( ) { 
var x = 0 

x += (iyield j - 'ls_t_ + _x^ 

x += (yield "2nd " + x) 

x += (yield "3rd " + x) 

x += (yield "4th " + x) 

} 


var it = sum() 

console .log(it.next( ' unused')) 
console"". log! it“. rJIi 

console .log(it.next(20)) 
console .log(it.next(300)) 


x = 0 + 1 




Passing values to generators 


function* sum( ) { 
var x = 0 

x += (yield "1st " + x) 

x += (yield "2nd " + x) 

x += (yield "3rd " + x) 

x += (yield "4th " + x) 


var it = sum() 

console . log (J.^ -.ngxtj ^imused' ) ) 
console . log (jit. next (1) ) ■ 
console .log(it.next (20)) 
console .log ( it.next (300)) 


} 




Passing values to generators 


function* sum( ) { 
var x = 0 

x += (yield ^lst_"_+_xj 
x += (yield '"nd""" +"x)‘ 

x += (yield "3rd " + x) 
x += (yield "4th " + x) 


var it = sum() 

console . log (j.£ ..ngxtj ^vmused ' )) 

. next (1) ) ■ 
console . log(it.next(20)) 
console • log(it.next(300)) 


} 






Passing values to generators 


function* sum( ) { 
var x = 0 

x += (yield ^lst_"_+_xj 
x += (yield "'2nd " + x)‘ 

x += (yield "3rd " + x) 
x += (yield "4th " + x) 

} 


var it = sum() 

console . log (j.£ ..ngxtj ^vmused ' )) 

. next (1) ) ■ 
console . log(it.next(20)) 
console • log(it.next(300)) 


{value: '2nd 1', done: false } 






Passing values to generators 


function* sum( ) { 
var x = 0 

x += (yield "1st " + x) 

x += (yield "3rd " + x) 

x += (yield "4th " + x) 


var it = sum() 

console .log(it.next('unused')) 
console .log(it.next(1)) 
console . Iog7 it”. 
console .log(it.next(300)) 


} 




Passing values to generators 


function* sum( ) { 
var x = 0 

x += (yield "1st " + x) 

x += (yield "3rd " + x) 

x += (yield "4th " + x) 

} 


var it = sum() 

console .log(it.next('unused')) 
console .log(it.next(1)) 
console . Iog7 it”. 
console .log(it.next(300)) 


x = 1 + 20 




Passing values to generators 


function* sum( ) { 


var x 

= 0 




X 

+= 

(yield 

"1st " 

+ 

x) 

X 

+= 

(yield 

"2nd " 

+ 

x) 

X 

+= 

( yield 

"3rd " 

+ 

X) 

X 

+= 

(yield 

"4 th " 

+ 

X) 


var it = sum() 

console .log(it.next('unused')) 
console .log(it.next ^ 1)J 
console . log (it . next ( 2 0 ) j 
console . log (it ."next" 3 (To") ) 


} 



Passing values to generators 


function* sum( ) { 


var x 

= 0 




X 

+= 

(yield 

"1st " 

+ 

x) 

X 

+= 

(yield 

"2nd " 

+ 

x) 

X 

+= 

(yield 

"3rd " 

+ 

X) 

X 

+= 

(yield 

"4 th " 

+ 

X) 


var it = sum() 

console .log(it.next('unused')) 
console .log(it.next(1)) 
console .log(it.next(20)) 
console .log(it.next(300)) 


} 



Passing values to generators 


function* sum( ) { 
var x = 0 

x += (yield "1st " + x) 
x += (yield "2nd " + x) 
x += (yield |"3rd " + x)F- 
x += (yield "4th " + x) 


var it = sum() 

console .log(it.next('unused')) 
console .log(it.next(1)) 

-“lefe-I it. next ( 2 0 ) ), 
console . log ( liT. next 7 S’oT) J) 


} 






Passing values to generators 


function* sum( ) { 


var x 

= 0 


X 

+= 

(yield 

"1st 

X 

+= 

(yield 

"2nd 

X 

+= 

(yield 

■"3rd 


x += (yield "4th 

} 




var it 

+ 

x) 

console 

+ 

x) 

console 

+ 

* 

L V 

1 

1 


+ 

X) 

console 


= sum() 

,log(it.next('unused')) 
,loq(it.next(1)) 
it .next (^0 ) ) 

. log (It .next" ?07)") 


{value: '3rd 21', done: false} 






Passing values to generators 


function* sum( ) { 
var x = 0 

x += (yield "1st " + x) 
x += (yield "2nd " + x) 
x += (iyi_eld ~_''3r_d_ j^x 1 )^ . _ „ 

x += (yield "4th " + x) 


var it = sum() 

console .log(it.next('unused')) 
console .log(it.next(1)) 
console .log(it.next(20)) 
console . logfftTffe^ct ("SOO ^ 


} 




Passing values to generators 


function* sum( ) { 
var x = 0 

x += (yield "1st " + x) 
x += (yield "2nd " + x) 
x += (iyi_eld "_''3r_d_ 

x += (yield "4th " + x) 

} 


var it = sum() 

console .log(it.next('unused')) 
console .log(it.next(1)) 
console .log(it.next(20)) 
console . logfftTffe^ct ("SOO ^ 


x = 21 + 300 




Passing values to generators 


function* sum( ) { 


var x 

= 0 




X 

+= 

(yield 

"1st " 

+ 

x) 

X 

+= 

(yield 

"2nd " 

+ 

x) 

X 

+= 

(yield 

"3rd " 

+ 

X) 

X 

+= 

( vield 

"4 th " 

+ 

X) 


var it = sum() 

console .log(it.next('unused')) 
console .log(it.next(1)) 
console .log(it.next(20)) 
console . log (lit . next (300) \ 


} 




Passing values to generators 


function* sum( ) { 
var x = 0 

x += (yield "1st " + x) 

x += (yield "2nd " + x) 

x += (yield "3rd " + x) 

x += (yield f* 4th" ,r +"xf- 


var it = sum() 

console .log(it.next('unused')) 
console . log(it.next(1)) 
console, log (it »next (20 )i) 
ooasoi® .-1©M it. next (^500 ) )■ 


} 







Passing values to generators 


function* sum( ) { 
var x = 0 
x += (yield "1st 
x += (yield "2nd 
x += (yield '3rd 
x += (yield!" 4 th 

} 




var it 

+ 

X) 

console 

+ 

X) 

console 

+ 

X) 

console 

+ 

it-- 



= sum() 

,log(it.next( ' unused')) 
,log(it.next(1)) 

,log ^it.next(20)) 
it. next (300) )■ 


{value: '4th 321', done: false} 







Similar, in a loop 


function* sum( ) { 
var x = 0 
while (true) { 

x += (yield x) 


} 


} 


var it = sum() 

console .log(it.next('unused')) 
console .log(it.next(1)) 
console .log(it.next(20)) 
console .log(it.next(300)) 


Similar, in a loop 


function* sum( ) { 
var x = 0 
while (true) { 

x += ( yield Jx^“ 


} 


} 


var it = sum() 


■console .log(it.next('unused')) ■ 
foneelre" log (it. next (1)) 
console .log(it.next(20)) 
console .log(it.next(300)) 




Similar, in a loop 


var it = sum() 


■console .log(it.next('unused')) ■ 
fQne©]?e* log (it. next (1) ) 
console .log(it.next(20)) 
console .log(it.next(300)) 


function* sum( ) { 
var x = 0 
while (true) { 

x += ( yield !xi)4“ “ “ “ ” 

} 

} 


{value: 0, done: false} 




Passing values to generators 


function* sum( ) { 
var x = 0 

while (truej . 

x += (|yield xi) 

} 


} 


var it = sum() 

console .log(it.next('unused')) 
-[console. log( it .next( 1)) ■ 
console .log(it.next(20)) 
console .log(it.next(300)) 


{value: 1, done: false} 





Passing values to generators 


function* sum( ) { 
var x = 0 
while (truej _ 

x += (|yield xi^ 

} 

} 


var it = sum() 

console .log(it.next('unused')) 
console .log(it.next(1)) 

■ console .log(it.next(20)) ■ 
console .log(it.next (300 )) 


(value:21, done: false} 





Passing values to generators 


function* sum( ) { 
var x = 0 
while (truej _ 

x += (Jyield xi)^« 

} 

} 


var it = sum() 

console .log(it.next(' unused')) 
console .log(it.next(1)) 

- - _ _ cons_ole .J-Oc^( it .jiextJ 2 0JJ _ 
'console .log(it.next (300 )) a 


{value:321, done: false} 




Making a iterable 

var mylterable = {}; 
myIterable[ Symbol .iterator] 
yield 1; 
yield 2; 
yield 3; 

}; 


for (let value of mylterable) 
console. log(value); // [1 

} 


[...mylterable]; // [1, 2, 3] 


function* () { 


{ 

2, 3] 


With async code (+ promises) 


const fetchUser = () => new Promise ( 
resolve => { 

setTimeout( () => resolve( 

{ 

username: 'nacho' , 
hash: '12345' 

} 

), 4000) 

}) 


function* apiCalls (username, password) { 
var user = yield fetchUser(username) 
return user 


var it = apiCalls() 

var promise = it.next().value 
console .log(promise) 

promise.then((result) => { 
console. log(result) 
var response = it.next(result) 
console .log(response) 

>) 


> 


With async code (+ promises) 


const fetchUser = () => new Promise ( 
resolve => { 

setTimeout( () => resolve( 

{ 

username: 'nacho' , 
hash: '12345' 

} 

), 4000) 

}) 


function* 


apiCalls i 


var user = yield_ fetchUser(username) 
return user 


var it = apiCalls() 


l var promise = it.next().value I 
j console. log(promise) ■ 


promise.then((result) => { 
console. log(result) 
var response = it.next(result) 
console .log(response) 

>) 


> 





With async code (+ promises) 


const fetchUser = () => new Promise ( 
resolve => { 

setTimeout( () => resolve( 

{ 

username: 'nacho' , 
hash: '12345' 

} 

), 4000) 

}) 


function* 


apiCalls i 


var user = yield_ fetchUser(username) 
return user 


} 


var it = apiCalls() 


l var promise = it.next().value I 
j console. log(promise) ■ 


promise.then((result) => { 
console. log(result) 
var response = it.next(result) 
console .log(response) 

>) 


Promise {<pending>} 





With async code (+ promises) 


const fetchUser = () => new Promise ( 
resolve => { 

setTimeout( () => resolve( 


>) 


1 


> 


username: 'nacho 
hash: '12345' 


4000) 



I 

I 

I 

I 


var it = apiCalls() 

var promise = it.next().value 
console .log(promise) 


function* apiCalls (username, password) { 
var user = yield fetchUser(username) 
return user 


} 


promis e^ thenyresult^ { 

"j console .log(result) 1 

var response = it.next(result) 
console .log(response) 

}) 


{username: 'nacho', hash: '12345'} 




With async code (+ promises) 


const fetchUser = () => new Promise ( 
resolve => { 

setTimeout( () => resolve( 

{ 

username: 'nacho' , 
hash: '12345' 

} 

), 4000) 

}) 


function* apiCalls (username, password) { 
v^uger j/Leld fetchUser (username) 


return user 


} 


var it = apiCalls() 

var promise = it.next().value 
console .log(promise) 

promise.then((result) => { 
console. log(result) 
_var_resjDonsej=_it .jiext (result) 
. .j console, log (response )■ 

>) 


{value: {username: 'nacho', hash: '12345' >, done: true} 




With async code (+ promises) 


function* apiCalls (username, password) { 
var user = yield fetchUser(username) 
var hash = yield someCrypto(password) 
if (user.hash == hash) { 

var hash = yield setSession(user.username) 
var posts = yield fetchPosts(user) 

} 

//. . . 


} 


With async code (+ promises) 


function* apiCalls (username, password) { 
var user = yield fetchUser(username) 
var hash = yield someCrypto(password) 
if (user.hash == hash) { 

var hash = yield setSession(user.username) 
var posts = yield fetchPosts(user) 

} 

//. . . 

} 


We are doing async as if it was sync 
Easy to understand, dependent on our project 






With async code (+ promises) 


function* apiCalls (username, password) { 
var user = yield fetchUser(username) 
var hash = yield someCrypto(password) 
if (user.hash == hash) { 

var hash = yield setSession(user.username) 
var posts = yield fetchPosts(user) 



} 


//. 


} 


We are doing async as if it was sync 
Easy to understand, dependent on our project 








With async code (+ promises) 


function* apiCalls (username, password) { 
var user = yield fetchUser(username) 
var hash = yield someCrypto(password) 
if (user.hash == hash) { 

var hash = yield setSession(user.username) 
var posts = yield fetchPosts(user) 



} 


//. 


} 


We are doing async as if it was sync 
Easy to understand, dependent on our project 


More complex code 
but reusable between projects 








With async code (+ promises) 


function* apiCalls (username, password) { 
var user = yield fetchUser(username) 
var hash = yield someCrypto(password) 
if (user.hash == hash) { 

var hash = yield setSession(user.username) 
var posts = yield fetchPosts(user) 

} 

//. . . 

} 


redux-saga 

(or other libs) 


We are doing async as if it was sync 
Easy to understand, dependent on our project 


More complex code 
but reusable between projects 










Setup 


import { createStore, applyMiddleware } from redux 
import createSagaMiddleware from redux-saga' 

// ... 

import { helloSaga } from ./sagas' 

const sagaMiddleware = createSagaMiddleware() 
const store = createStore( 
reducer, 

applyMiddleware(sagaMiddleware) 

) 

sagaMiddleware.run(helloSaga) 


How to play a sound? 


Imagine that we have a class SoundManager 
that can load sounds, do a set up, 

and has a method SoundManager. play (sound) 


How could we use it in React? 


Naive solution 


class MoveButton extends Component { 
render () { 
return ( 

<Button 

onPress={playSound(soundManager, 

/> 

); 

} 

> 


'buzz' )} 


Naive solution 


class MoveButton extends Component { 
render () { 
return ( 

<Button 

onPress={playSound(soundManager, 

/> 

); 

} 

> 


'buzz' )} 


But where does soundManager come from? 


Naive solution 


class MoveButton extends Component { 
render () { 
return ( 

<Button 

onPress={this .props.dispatch(playSound( 'buzz' ))} 

/> 

); 

} 

> 


Naive solution 


class MoveButton extends Component { 
render () { 
return ( 

<Button 

onPress={this .props.dispatch(playSound( 'buzz' ))} 

/> 

); 

} 

> 


Dispatch an action and well see. 

But the action creator doesn't have access 

to SoundManager:_( 


Naive solution 


class MoveButton extends Component { 
render () { 
return ( 

<Button 

onPress={playSound(this.props.soundManager, 

/> 

); 

} 

> 


'buzz' )} 


Passing it from its parent, and the parent of its parent with props? 


Naive solution 


class MoveButton extends Component { 
render () { 
return ( 

<Button 

onPress={playSound(this.props.soundManager, 'buzz' )} 

/> 

); 

} 

> 


Passing it from its parent, and the parent of its parent with props? 


Hairball ahead 


Naive solution 


class MoveButton extends Component { 
render () { 
return ( 

<Button 

onPress={playSound(this.props.soundManager, 

/> 

); 

} 

> 


'buzz' 


From redux connect: 

• But soundManager is not serializable. 

• Breaks time-travel, persist and rehydrate store... 


Naive solution 


What if we want to play a sound when the opponent moves too 
and we receive her movements from a websocket? 


Naive solution 


What if we want to play a sound when the opponent moves too 
and we receive her movements from a websocket? 


class Game extends Component { 
componentDldMount () { 

this .props.dispatch(connectSocket(soundManager)) 

} 

II.. . 

} 


Naive solution 


What if we want to play a sound when the opponent moves too 
and we receive her movements from a websocket? 


class Game extends Component { 
componentDldMount () { 

this .props.dispatch(connectSocket(soundManager)) 

} 

II.. . 

} 


What has to do connectSocket with soundManager? 

We are forced to do this because we don't know anything 

better:_( 


Using sagas 


import { take } from redux-saga/effects' 

export default function* rootSaga( ) { 

const action = yield jtake| Constants.PLAY_SOUND_REQUEST) 
console.log(action.sound) 


} 


Example: Play sound 


import { take, call } from redux-saga/effects' 

export default function* rootSaga( soundManager) { 

const action = yield take(Constants.PLAY_SOUND_REQUEST) 
soundManager.play(action.sound) 


} 


Example: Play sound 


import { take, call } from redux-saga/effects' 

export default function* rootSaga( soundManager) { 

const action = yield take(Constants.PLAY_SOUND_REQUEST) 
soundManager.play(action.sound) 

} 


But we will need a mock to test it 


Example: Play sound (call) 


import { take, call } from redux-saga/effects' 

export default function* rootSaga( soundManager) { 

const action = yield take(Constants.PLAY_SOUND_REQUEST) 
yield icall,( soundManager .play, action, sound) 


} 


Example: Play sound (call) 


import { take, call } from redux-saga/effects' 

export default function* rootSaga( soundManager) { 

const action = yield take(Constants.PLAY_SOUND_REQUEST) 
yield icall,( soundManager .play, action, sound) 

} 

Call returns an object 

{ 

CALL: { 

fn: soundManager.play, 
args: [ buzz ] 

} 


} 


Declarative effects 


export function* delayAndDo( ) { 
yield call(delay, 1000) 
yield call(doSomething) 

} 


test( 'delayAndDo Saga test', (assert) => { 
const it = delayAndDo() 


assert.deepEqual( 

fit.nex".vaTue," ___ "► < CALL: < fn: dela y' ar 9 s: [ 100 °]>} 

I call(delay, 1000) f| 

cTeTayAncfBcT 5aga™must call delay(lOOO)' 


assert.deepEqual^ 

I it. next ( ) .value, 
l call(doSomething), | 

'delayAndDo Saga must call doSomething 



CALL: 


{fn: doSomething, args: 


[]}} 


Effects are declarative, so they are easier to test 



Example: Play sound 


import { take, call } from redux-saga/effects' 

export default function* rootSaga( soundManager) { 

const action = yield take(Constants.PLAY_SOUND_REQUEST) 
yield call(soundManager.play, action.sound) 


} 


Example: Play sound 


import { take, call } from redux-saga/effects' 

export default function* rootSaga( soundManager) { 

const action = yield take(Constants.PLAY_SOUND_REQUEST) 
yield call(soundManager.play, action.sound) 

} 


Will take 1 action, play a sound, and terminate 


Example: Play sound 


import { take, call } from redux-saga/effects' 

export default function* rootSaga( soundManager) { 
while (true) { 

const action = yield take(Constants.PLAY_SOUND_REQUEST) 
yield call(soundManager.play, action.sound) 

} 

} 


Example: Play sound 


import { take, call } from redux-saga/effects' 

export default function* rootSaga( soundManager) { 
while (true) { 

const action = yield take(Constants.PLAY_SOUND_REQUEST) 
yield call(soundManager.play, action.sound) 

} 

} 


Will take every action 


Example: Play sound (takeEvery) 


import { takeEvery, call } from redux-saga/effects' 

function* playSound( soundManager, action) { 

yield call(soundManager.play, action.sound) 

} 

export default function* rootSaga( soundManager) { 

const action = yield ftakeEvery!Constants.PLAY_SOUND_REQUEST 
playSound, soundManager) 

} 




Dispatching (put) 


import { take, put } from redux-saga/effects' 

function* watchLogin( ) { 
while (true) { 

const action = yield take( USER_LOGIN_SUCCESS ) 
yield JgutJ {type: 'FETCH_NEW_MESSAGES' }) 


} 


} 


Dispatching (put) 


import { take, put } from redux-saga/effects' 

function* watchLogin( ) { 
while (true) { 

const action = yield take( USER_LOGIN_SUCCESS ) 
yield JgutJ {type: 'FETCH_NEW_MESSAGES' }) 

} 

} 


put dispatches a new action 


Ajax example 


function makeASandwichWithSecretSauce () { 
return function (dispatch) { 

dispatch({type: Constants.SANDWICH_REQUEST}) 

return fetch ( https://www.google.com/search?q=secret+sauce ) 

.then( 

sauce => dispatch({type: Constants.SANDWICH_SUCCESS, sauce 
error => dispatch({type: Constants.SANDWICH_ERROR, error}) 

); 

}; 

} 


dispatch(makeASandwichWithSecretSauce()) 



Ajax example 


Thunk 


function makeASandwichWithSecretSauce () { 
return function (dispatch) { 

dispatch({type: Constants.SANDWICH_REQUEST}) 

return fetch ( https://www.google.com/search?q=secret+sauce ) 

.then( 

sauce => dispatch({type: Constants.SANDWICH_SUCCESS, sauce 
error => dispatch({type: Constants.SANDWICH_ERROR, error}) 

); 

}; 

} 

dispatch(makeASandwichWithSecretSauce()) 



Ajax example 


import { takeEvery, put, call } from ' redux-saga/effects' 

function* sandwichRequest () { 

yield put({type:Constants.SANDWICH_REQUEST_SHOW_LOADER}) 
try { 

const sauce = yield call(() => fetch (' https://www.google.com/ 
search?q=secret+sauce' )) 

yield put {type: Constants.SANDWICH_SUCCESS, sauce} 

} catch (error) { 

yield put {type: Constants.SANDWICH_ERROR, error} 

} 

} 


export default function* rootSage () { 

const action = yield takeEvery(Constants.SANDWICH_REQUEST, 
sandwichRequest) 

} 


dispatch({type:Constants.SANDWICH_REQUEST}) 


Ajax example 


Saga 

import { takeEvery, put, call } from ' redux-saga/effects' 


function* sandwichRequest () { 

yield put({type:Constants.SANDWICH_REQUEST_SHOW_LOADER}) 
try { 

const sauce = yield call(() => fetch (' https://www.google.com/ 
search?q=secret+sauce' )) 

yield put {type: Constants.SANDWICH_SUCCESS, sauce} 

} catch (error) { 

yield put {type: Constants.SANDWICH_ERROR, error} 

} 

} 


export default function* rootSage () { 

const action = yield takeEvery(Constants.SANDWICH_REQUEST, 
sandwichRequest) 

} 


dispatch({type:Constants.SANDWICH_REQUEST}) 


takeLatest 


import { takeLatest } from redux-saga/effects' 

function* watchFetchData () { 

yield ■takeLatest^ 'FETCH REQUESTED', fetchData) 

} 




takeLatest 


import { takeLatest } from redux-saga/effects' 

function* watchFetchData () { 

yield ■takeLatest^ 'FETCH REQUESTED', fetchData) 

} 


Ensure that only the last fetchData will be running 




Non-blocking (fork) 


function* watchJoinGame (socket) { 
let gameSaga = null; 
while (true) { 

let action = yield take(Constants.JOIN_GAME) 
gameSaga = yield B fork^ game, socket, action.gameld) 
yield fork(watchLeaveGame, gameSaga) 

} 

} 

function* cfamej gameChannel, response) { 

yield ■forkg listenToSocket, gameChannel, 'game:move', processMovements) 
yield *fork| listenToSocket, gameChannel, 'game:end', processEndGame) 

// More things that we want to do inside a game 

//. . . 

} 


Non-blocking (fork) 


function* watchJoinGame (socket) { 
let gameSaga = null; 
while (true) { 

let action = yield take(Constants.JOIN_GAME) 
gameSaga = yield B fork^ game, socket, action.gameld) 
yield fork(watchLeaveGame, gameSaga) 

} 

} 

function* cfamej gameChannel, response) { 

yield ■forkg listenToSocket, gameChannel, 'game:move', processMovements) 
yield *fork| listenToSocket, gameChannel, 'game:end', processEndGame) 

// More things that we want to do inside a game 

//. . . 

} 


Fork will create a new task without blocking in the caller 


Cancellation (cancel) 

function* watchJoinGame (socket) { 
let gameSaga = null; 
while (true) { 

let action = yield take(Constants.JOIN_GAME) 
gameSaga = yield fork(game, socket, action.gameld) 
yield fork(watchLeaveGame, gameSaga) 

} 

} 


Cancellation (cancel) 

function* watchJoinGame (socket) { 
let gameSaga = null; 
while (true) { 

let action = yield take(Constants.JOIN_GAME) 
gameSaga = yield fork(game, socket, action.gameld) 
yield fork(watchLeaveGame, gameSaga) 

} 

} 


function* watchLeaveGame (gameSaga) { 
while (true) { 

yield take(Constants.GAME_LEAVE) 
if (gameSaga) { yield cancel(gameSaga) } 


} 


} 


Cancellation (cancel) 

function* watchJoinGame (socket) { 
let gameSaga = null; 
while (true) { 

let action = yield take(Constants.JOIN_GAME) 
gameSaga = yield fork(game, socket, action.gameld) 
yield fork(watchLeaveGame, gameSaga) 

} 

} 


function* watchLeaveGame (gameSaga) { 
while (true) { 

yield take(Constants.GAME_LEAVE) 
if (gameSaga) { yield cancel(gameSaga) } 

} 

} 


function* gameSaga (socket, gameld) { 
try { 

const result = yield call(joinChannel, socket, ' game:' +gameld) 
// Call instead of fork so it blocks and we can cancel it 
yield call(gameSequence, result.channel, result.response) 

} catch (error) { 

console .log(error) 

} finally { 

if (yield cancelled()) { 

socket.channel(' game:' +gameld, {}).leave() 

} 


} 


} 


Cancellation (cancel) 

function* watchJoinGame (socket) { 
let gameSaga = null; 
while (true) { 

let action = yield take(Constants.JOIN_GAME) 
gameSaga = yield fork(game, socket, action.gameld) 
yield fork(watchLeaveGame, gameSaga) 

} 

} 


function* watchLeaveGame (gameSaga) { 
while (true) { 

yield take(Constants. G^M E L EAVE ) 
if (gameSaga) { yield jcancel*( gameSaga) } 

} 

} 


function* gameSaga (socket, gameld) { 
try { 

const result = yield call(joinChannel, socket, ' game:' +gameld) 
// Call instead of fork so it blocks and we can cancel it 
yield call(gameSequence, result.channel, result.response) 

} catch (error) { 

console .log(error) 

} finally { ■■■■■■ 

if (yield *cancelled( ) R { 

socket channel™' game:' +gameld, {}).leave() 

} 


} 


} 



Non-blocking detached (spawn) 

Fork 

A tasks waits for all its forks to terminate 

Errors are bubbled up 

Cancelling a tasks cancels all its forks 

Spawn 

New tasks are detached 
Errors don't bubble up 
We have to cancel them manually 


Implement takeEvery from take 


function* takeEvery (pattern, saga, ...args) { 
const task = yield fork( function* () { 
while (true) { 

const action = yield take(pattern) 
yield fork(saga, ...args.concat(action)) 

} 

}) 

return task 


} 


Parallel (all) 


export default function* rootSaga( ) 
yield all([ 

playSounds(), 
watchJoinGame(), 

//... 



{ 


Will block until all terminate 


Races (race) 


import { race, take } from ' redux-saga/effects' 

function* aiCalculate () { 
while ( true ) { ... } 

} 

function* watchStartBackgroundTask () { 

while (true) { 

yield take( 'START_AI_COMPUTE_PLAYS' ) 
yield race({ 

task: call(aiCalculate), 

cancelAi: take( 'FORCE_MOVE_USER_IS_TIRED_OF_WAITING' ) 

}) 

} 

} 


In race, if one tasks terminates, the others are cancelled 


Watch and fork pattern 


function* watchRequests () { 
while (true) { 

const { payload } = yield take( REQUEST ) 
yield fork(handleRequest, payload) 

> 

} 


https://medium.eom/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab 


Sequentially, using channels 


import { take, actionChannel, call, ... } from 'redux-saga/effects' 

function* watchRequests () { 

const requestChan = yield actionChannel(' REQUEST' ) 
while (true) { 

const { payload } = yield take(requestChan) 
yield call(handleRequest, payload) 

} 

} 


https://medium.eom/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab 


Sequentially, using channels 


import { take, actionChannel, call, ... } from 'redux-saga/effects' 

function* watchRequests () { 

const requestChan = yield actionChannel(' REQUEST' ) 
while (true) { 

const { payload } = yield take(requestChan) 
yield call(handleRequest, payload) 

} 

} 


Channels act as buffers, buffering actions while we block 


https://medium.eom/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab 


Connect + listen from socket 

import { eventChannel, END } from 'redux-saga' 

function websocketlnitChannel () { 
return eventChannel( emitter => { 
const ws = new WebSocket() 

ws.onmessage = e => { 

return emitter( { type: 'ACTION_TYPE' , payload } ) 

} 

// unsubscribe function 
return () => { 
ws.close() 
emitter(END) 

} 

}) 

} 

export default function* websocketSagas () { 

const channel = yield call(websocketlnitChannel) 
while (true) { 

const action = yield take(channel) 
yield put(action) 

> 

> 

eventChannel turns the ws connection into a channel 


https://medium.eom/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab 


Obtaining the state (select) 


import { select, takeEvery } from redux-saga/effects' 

function* watchAndLog( ) { 

yield takeEvery( * , function* logger (action) { 
const state = yield select() 


console. log( action , action) 
console. log( state after , state) 

}) 

} 


select() gives us the state after the reducers have applied the action 

It is better that sagas don't to rely on the state, but it is still possible 


Sequencing (delay) 


import { put } from 'redux-saga/effects' 

import { delay } from 'redux-saga' 

function* scoreSequence (payload) { 

yield put({ type: Constants.END_GAME }) 
yield call(delay, 2000) 

yield put({ type: Constants.SHOW_WINNER, rightAnswer: payload.winner }) 
yield call(delay, 2000) 

yield put({ type: Constants.GAME_UPDATE_SCORES, scores: payload.scores 
yield call(delay, 1000) 

yield put({ type: Constants.GAME_SHOW_PLAY_AGAIN }) 


} 


Summary 


•Take (takeEvery, takeLast) 

•Call 

•Put 

• Fork & Spawn 
•Cancel 

•Channels & EventChannels 

•All & race 

•Select 

•Delay 




Thanks! 
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